<template>
  <div class="navList">
    <div class="navLeft">
      <div v-for="(nav,index) in navList"
           :key="index"
           :class="{active: currentPath === nav.path}"
           @click="navChange(nav)"
           class="navItem">
        <span class="title">{{nav.title}}</span>
        <span class="closeBtn" @click.stop="navChange(nav, index)" v-if="index>0">x</span>
      </div>
    </div>
    <!-- 关闭全部 -->
    <div class="navRight">
      <zy-button textButton class="closeAllBtn" @click="navChange(null,'all')">一键关闭</zy-button>
    </div>
  </div>
</template>

<script>
	export default {
		name: "navList",
		props: {
			navList: {
				type: Array,
				default: () => []
			},
			currentPath: {
				type: String,
				default: () => ''
			},
			maxLength: {
				type: Number,
				default: () => 0
			}
		},
		data() {
			return {};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			navChange(navInfo, index) {
				let navList = [];

				if (index === 'all') {
					navInfo = {...this.navList[0]};
					navList = [navInfo]
				} else if (index) {
					navInfo = this.navList[index - 1];
					this.navList.splice(index, 1);
					navList = [...this.navList]
				}

				this.$emit('navChange', navInfo, navList)
			}
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/navList/navList.less">

</style>
